<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
	<meta name="format-detection" content="telephone=no">
	<title></title>
	<style>
		*{margin:0;padding:0;box-sizing: border-box;}
		html,body{width:100%;height:100%;}
		.dsp-n{display: none;}
		.boxcontent{width:200px;font-size: 0;margin: 0 auto;}
		.boxcontent .item{width:100px;height:100px;border:solid 1px #ff0000;display: inline-block;    background-repeat: no-repeat;background-position: center center;background-size: contain;}
		.scbtn{margin:20px auto; width:80px;height:30px;line-height: 30px;text-align: center;border-radius: 10px;border:solid 1px #000000;}
		.jqbtn{}
		.viewport{max-width:640px;margin:0 auto;min-height: 100%;}
		.boxcontent .active{background-color:#FF0000;}
		.upfile{display: none;}
		#clipArea {
			height: 320px;
		}
		#file,
		#clipBtn {
			margin: 20px;
		}
		#view {
			margin: 0 auto;
			width: 200px;
			height: 200px;
			background-color: #666;
		}
		.upview{width:100%;height:100%;left:0;background:#000000;position: fixed;top:0;display: none;}
		.upcontent{margin:30px auto 0;max-width: 640px;text-align: center;}
		.ucwcshow{max-width: 300px;margin:0 auto;font-size: 0;}
		.ucwcshow img{width: 100%; vertical-align: top;display: inline-block;}
		.ucwcshow.line img{width:50%;}
	</style>
</head>
<body>
	<div class="viewport">
		<div class="boxcontent">
			<div class="item" data-index="1"></div>
			<div class="item" data-index="2"></div>
			<div class="item" data-index="3"></div>
			<div class="item" data-index="4"></div>
			<div class="item" data-index="5"></div>
			<div class="item" data-index="6"></div>
		</div>
		<div id="js_filebtn" class="scbtn">上传图片</div>
		<div id="js_reqimgbtn" class="scbtn dsp-n">提交信息</div>
		
		<div ontouchstart="" class="upview">
			<div class="upcontent">
				<div id="clipArea"></div>
				<input class="upfile" type="file" id="file">
				<!--<button id="cxscbtn" class="jqbtn">重新上传</button>-->
				<!--<button id="qxscbtn" class="jqbtn">取消上传</button>-->
				<button id="clipBtn" class="jqbtn">截取</button>
				<!--<div id="view"></div>-->				
			</div>
		</div>
		<img src="" id="imga" alt="" />
	</div>
	<script src="js/jquery.3.2.0.min.js"></script>	
	<script src="js/iscroll-zoom.js"></script>
	<script src="js/hammer.min.js"></script>
	<script src="js/lrz.all.bundle.js"></script>
	<script src="js/PhotoClip.min.js"></script>
	<script>
		//初始化图片截取工具
		var pc = new PhotoClip('#clipArea', {			
			size: [300, 300],
			file: '#file',
			//outputSize: 640,
//			view: '#view',
			ok: '#clipBtn',
			loadStart: function() {
				console.log('开始读取照片');
			},
			loadComplete: function() {
				console.log('照片读取完成');
			}, 
			done: function(dataURL) {
				jqimg(dataURL);
			},
			fail: function(msg) {
				alert(msg);
			}
		});

		var stdata = [];
		var imgdata = [];
		var isline = false; //判断是两列还是一列
		//选择尺寸的小按钮
		$(".boxcontent .item").click(function(){
			var $this = $(this),
				index = $this.data("index");
			if($this.hasClass("active")){
				$this.removeClass("active");
				stdata.remove(index);
				return false;
			}
			stdata.push(index);
			$this.addClass("active");			
		});
		
		//选择尺寸的判断  / 成功后打开裁切页面
		$("#js_filebtn").click(function(){
			//初始化一下。 冗余带吗暂留 避免增加业务后报错
			isline = false;
			imgdata = [];
		
			if(stdata.length){
				stdata.sort()
				var str = stdata.join('');
				var size = [300, 300];
				
				switch(str.length){
					case 1 :
						break;
					case 2 :
						if(/12|34|56/.test(str)){
							isline = true;
							size = [300, 150];
						}else if(/13|35|24|46/.test(str)){
							size = [150, 300];
						}else{
							size = null;
						}
						break;
					case 3 : 
						if(!/135|246/.test(str)){						
							size = null;
						}else{
							size = [100, 300];
						}
						break;
					case 4 :
						if(!/1234|3456/.test(str)){						
							size = null;
						}
						isline = true;
						break;
					case 5 :
						size = null;
						break;
					case 6 :
						size = [150, 300];
						isline = true;
						break;
				}
				if(size){
					showimgcq(size);
				}else{
					alert("选择的图片尺寸必须为矩形哦！");
					reloadup();
				}
				return false;
			}
			alert("请先选择上传图片的尺寸");			
		});
		
		//选择错误时重新选择
		function reloadup (){			
			stdata = [];
			$(".upview").hide();
			$(".boxcontent .item").removeClass("active");
		}
		//打开裁切图片界面
		function showimgcq (size) {
			$("#file").click();
			$(".upview").show();
			pc.clear();
			pc.size(size[0], size[1]);
		}
		
		//取消上传 
//		$("#qxscbtn").click(function(){
//			reloadup();
//		});
		
		//裁切图片 点击裁切后调用的
		function jqimg(imgbasedata){
			if(stdata.length > 1){
				var img = new Image()
				img.src = imgbasedata;
				img.onload = function(){
					var cqwidth = img.width;
					var cqheight = cqwidth;
					if(isline){
						var cqwidth = img.width/2;
						var cqheight = cqwidth;	
					}				
					
					var canvas = document.createElement('canvas');
						canvas.width = cqwidth;   /*设置新的图片的宽度*/ 
		            	canvas.height = cqheight;
		            	
					for(var i = 0; i< stdata.length; i++){
						var x = 0, y = 0;
						if(i%2 == 0){						
							if(isline){
								x = 0;											
								y = cqwidth * Math.floor(i/2);
							}else{
								x = 0;
								y = cqheight * i;
							}
						}else{
							if(isline){
								x = cqwidth;
								y = cqwidth * Math.floor(i/2);
							}else{
								x = 0;
								y = cqheight*i;
							}
						}
						
						var ctx = canvas.getContext('2d');
						ctx.drawImage(img,  x, y, cqwidth, cqheight,0, 0, cqwidth, cqheight);
						var imgbase = canvas.toDataURL('image/png');
						$(".item.active").eq(i).css("background-image", "url(" + imgbase + ")");
						imgdata.push(imgbase);
					}
					showfileview();
				}
			}else{
				$(".item.active").eq(0).css("background-image", "url(" + imgbasedata + ")");
				imgdata.push(imgbasedata);
				showfileview();
			}
						
		}
		
		//完成裁剪返回展示页面
		function showfileview(){
			$("#js_reqimgbtn").show();
			$("#js_filebtn").hide();
			$(".upview").hide();
			$(".boxcontent .item").unbind("click");
		}
		
		//提交上传
		$("#js_reqimgbtn").click(function (){
			alert("正在上传!");
			$.ajax({
				type:"POST",
				url:"http://www.sharekq.cn/shareKq/ad/Upload.do",				
				data : { imgdata : imgdata, imgindex : stdata, devno : "123"} ,
				success : function(result){
					alert("上传成功！");
					reloadup();
				},
				error : function(){
					alert("上传失败！");
				}
			});
		});
		
		//扩展arr的函数
		Array.prototype.indexOf = function(val) {
			for (var i = 0; i < this.length; i++) {
				if (this[i] == val) return i;
			}
			return -1;
		};
		Array.prototype.remove = function(val) {
			var index = this.indexOf(val);
			if (index > -1) {
				this.splice(index, 1);
			}
		};
	</script>
</body>
</html>